<template>
  <div class="login">
    <div class="login-box">
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
            v-decorator="[
'username',
{ rules: [{ required: true, message: 'Please input your username!' }] }
]"
            placeholder="Username"
          >
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
'password',
{ rules: [{ required: true, message: 'Please input your Password!' }] }
]"
            type="password"
            placeholder="Password"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox
            v-decorator="[
'remember',
{
valuePropName: 'checked',
initialValue: true,
}
]"
          >Remember me</a-checkbox>
          <a class="login-form-forgot" href>Forgot password</a>
          <a-button type="primary" html-type="submit" class="login-form-button">Log in</a-button>Or
          <a href>register now!</a>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginUser: {
        grant_type: "password",
        username: "ahri",
        passwd: "123123",
        client_id: "gomro_api",
        client_secret: "123123"
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      // var params = new URLSearchParams();
      // params.append("grant_type", "password");
      // params.append("username", "ahri");
      // params.append("password", "123123");
      // params.append("client_id", "gomro_api");
      // params.append("client_secret", "123123");
      // console.log(params);
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          const token = values;
          localStorage.setItem("antToken", token);
          this.$message.success("登录成功");
          // 页面跳转
          this.$router.push("/home");
          // this.$axios
          //   .post("/oauth/token ", params)
          //   .then(res => {
          //     console.log(res);
          //     // 登录成功
          //     const token = values;
          //     localStorage.setItem("antToken", token);
          //     this.$message.success("登录成功");
          //     // 页面跳转
          //     this.$router.push("/index");
          //   })
          //   .catch(error => {
          //     console.log(error);
          //   });
        } else {
          console.log(err);
          this.$message.error("登录失败");
        }
      });
    }
  }
};
</script>

<style scoped>
.login {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../assets/lg_bg.jpg");
  background-size: 100%;
  background-position: center;
}
.login-box {
  width: 360px;
  height: 270px;
  padding: 20px;
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -135px auto auto -180px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
